<template>
<ul>
  <li class="food-item goodsbox-content" v-for="(item,i) in data" :key="item.item_id" >
  <div class="icon">
    <!-- <img width="52" height="52" src="@/assets/高木同学.jpg" /> -->
    <!-- src="//elm.cangdu.org/img/16f35f39b6262048.jpg"正确网址 -->
    <!-- src="elm.cangdu.org/img/16f35f39b6262048.jpg" -->
    <img width="52" height="52" :src="'//elm.cangdu.org/img/'+item.image_path" />
  </div>
 <div class="content" >
   <div @click="shopCarData(item,i)">
    <van-tag round type="danger" class="floatTag" plain text-color="#f39f72" v-if="item.attributes[0]" >{{item.attributes[0].icon_name}}</van-tag>
      <h3 class="name">{{ item.name }}</h3>
      <p class="desc">{{ item.description }}</p>
      <div class="extra">
        <span class="count">月售{{ item.month_sales }}份</span>
        <span>好评率{{ item.satisfy_rate }}%</span>
      </div>
      <van-tag round type="danger" plain :text-color="item.activity.icon_color" v-if="item.activity" >{{item.activity.image_text}}</van-tag>
    </div>
    <div class="cartcontrol-wrapper price">
          <div class="price">
      <span class="now">￥</span>
      <span class="old">{{ item.specfoods[0].price }}</span>
      
       <van-stepper v-model="item.__v"  theme="round" button-size="18" min='0' :show-input='item.__v>0?true:false' :show-minus='item.__v>0?true:false' @plus="clickFn()"  />
       <!-- :checked="value" -->
    </div>
    </div>
  </div>
  </li>
  </ul>
</template>

<script>
import eventBus from '@/EventBus/index.js'
export default {
  props:['data'],
  data () {
    return {
      value:0,
      //  :show-minus='show' @plus="show=true"        this.flag2 = true
      // show:false
    }
  },
  methods: {
    //传商品详情数据（子传父）
    shopCarData(item){
      this.$emit('shopCarD',item)
    },
    //兄弟传缩小动画
    clickFn(){

      eventBus.$emit('animation',true)
    }
  },
};
</script>

<style lang="less" scoped>
.goodsbox-content{
  display: flex;
  position: relative;
  // height: 150px;

    background-color: #fff;
    padding: 15px 10px;
    border-bottom: 1px solid #f8f8f8;
    box-sizing: border-box;
    overflow: hidden;
  .icon{
    margin-top: 3px;
    margin-right: 20px;
  }
  h3,p{
    font-size:18px;
    margin: 0;
  }
  p{
    font-size: 12px;
  }
  .extra{
    font-size: 12px;
    span{
      margin-right: 5px;
    }
  }
  .price{
    margin-top: 10px;
    font-size: 16px;
  }
  .floatTag{
    position: absolute;
    top: 17px;
    right: 23px;
  }
  .old{
    font-size: 18px;
    color: #f60;
    font-weight: 700;
    // margin-right: 7px;
  }
  .desc{
    margin: 5px 0;
  }
.van-tag--danger{
  margin: 6px 0 3px;
}
.now{
      font-size: 12px;
    color: #f60;
    margin-right: 1px;
}
.price{
  position: relative;
  width: 127px;
}
.van-stepper{
  position: absolute;
  right: -90px;
  top: 0px;
}
}
</style>
